<template>
  <el-dialog
    class="detailDialog"
    v-model="props.dialogVisible"
    title="详情"
    width="55%"
    :close-on-click-modal="false"
    @close="close"
  >
    <el-row class="row">
      <el-col :span="8">
        <div>
          {{ props.dialogForm?.title }}类型：
          <span v-if="props.dialogForm?.title == '出库'">{{
            props.dialogForm?.form?.retrievalType
          }}</span>
          <span v-else>{{ props.dialogForm?.form?.warehouseType }}</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div>
          关联工单号：{{ props.dialogForm?.form?.orderNum }}
          <span class="copy" @click="copyText(props.dialogForm?.form?.orderNum)"
            >复制</span
          >
        </div>
      </el-col>
      <el-col :span="8" v-if="props.dialogForm?.title == '入库'">
        <div>
          退还单号：{{ props.dialogForm?.form?.refundNum }}
          <span
            class="copy"
            @click="copyText(props.dialogForm?.form?.refundNum)"
            >复制</span
          >
        </div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="8">
        <div>
          {{ props.dialogForm?.title }}备件数量：{{
            props.dialogForm?.form?.totalAmount
          }}
        </div>
      </el-col>
      <el-col :span="8">
        <div>备件总价值：{{ props.dialogForm?.form?.totalMoney }}元</div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="8">
        <div>申请人：{{ props.dialogForm?.form?.applyUserName }}</div>
      </el-col>
      <el-col :span="8">
        <div>
          {{ props.dialogForm?.title }}人：{{
            props.dialogForm?.form?.createUserName
          }}
        </div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="8">
        <div>
          {{ props.dialogForm?.title }}时间：{{
            props.dialogForm?.form?.createTime
          }}
        </div>
      </el-col>
    </el-row>

    <div style="margin-top: 20px">{{ props.dialogForm?.title }}备件列表</div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :span-method="objectSpanMethod"
    >
      <el-table-column prop="partNum" label="备件编号" />
      <el-table-column prop="partName" label="备件名称" />
      <el-table-column prop="partTypeName" label="备件类型" />
      <el-table-column prop="batchNum" label="备件批次号" />
      <el-table-column
        prop="amount"
        :label="`${props.dialogForm?.title}数量`"
      />
      <el-table-column
        prop="surplusAmount"
        :label="`${props.dialogForm?.title}后实际库存数量`"
      />
      <el-table-column prop="price" label="单价(元)">
        <template #default="scope">
          <div>{{ scope.row.price + '/' + scope.row.partUnit }}</div>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage, TableColumnCtx } from 'element-plus'
import { ref, reactive, watch } from 'vue'
import useClipboard from 'vue-clipboard3'
const props = defineProps({
  dialogVisible: Boolean,
  dialogForm: Object
})
const { toClipboard } = useClipboard()
const emit = defineEmits(['closeDetail'])
const close = () => {
  emit('closeDetail')
}

const tableData = ref<any>([])

const copyText = async (val: any) => {
  try {
    if (val == '') {
      ElMessage({
        type: 'warning',
        message: '暂无内容'
      })
    } else {
      await toClipboard(val)
      ElMessage({
        type: 'success',
        message: '复制成功'
      })
    }
  } catch (e) {
    console.error(e)
  }
}

watch(
  () => props.dialogVisible,
  () => {
    if (props.dialogVisible == true) {
      tableData.value = props.dialogForm?.form.partDetailResponses
    } else {
      tableData.value = []
    }
  }
)

// 表格合并行
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
  const list = tableData.value
  const newArr: any = []
  const obj: any = {}
  for (let i = 0; i < list.length; i++) {
    if (i === 0) {
      obj.row = 1
      obj.col = 1
      newArr.push(obj)
    } else {
      if (list[i].partNum == list[i - 1].partNum) {
        newArr.push({ row: 0, col: 0 })
        const index = list.findIndex((item: any) => {
          return item.partNum === list[i - 1].partNum
        })
        newArr[index].row++
      } else {
        newArr.push({ row: 1, col: 1 })
      }
    }
  }
  if (columnIndex == 5) {
    let row = newArr[rowIndex].row
    let col = newArr[rowIndex].col

    return {
      rowspan: row,
      colspan: col
    }
  }
}
</script>

<style scoped lang="scss">
.detailDialog {
  .row {
    font-size: var(--el-font-size-base);
    margin-bottom: 8px;
  }

  .info {
    font-size: 18px;
    font-weight: 600;
  }
}

.pcInfo {
  margin-bottom: 8px;

  > span {
    margin-right: 16px;
    font-weight: 400;
    line-height: 22px;
  }
}

.copy {
  margin-left: 5px;
  color: var(--el-color-primary);
  cursor: pointer;
}
</style>
